<template>
  <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onClickPagination">

    <template #remaining="{record}">
      {{ record.totalnum-record.cernum }}
    </template>

    <template #time="{text}">
      {{ FormatTime(text) }}
    </template>

    <template #loginstatus="{text,record}">
      <a-tag color="green" v-if="text" title="已初始化">已初始化</a-tag>
      <a-tag color="red" v-else title="未初始化" @click="onClickInitializeAccount(record)">未初始化</a-tag>
    </template>

    <template #status="{record,index}">
      <a-switch v-model:checked="record.status" @click="onChangeStatus(record,index)" />
    </template>

    <template #operating="{record,index}">
      <a-button type="primary" @click="onClickVerifyAccount(record)">校验账号</a-button>
      <a-popconfirm title="您确定要删除此账号吗?" ok-text="是" cancel-text="否" @confirm="onClickDelete(record,index)">
        <a-button type="danger"> 删除账号 </a-button>
      </a-popconfirm>
    </template>
  </a-table>
</template>

<script lang='ts'>
import { reactive, SetupContext, toRefs } from "vue";
import { delcer, initcer, upcer, valicer } from "@/api/cerApi/index";
import { FormatTime } from "@/CommonAssets/FormatTime/FormatTime";
import { $message } from "@/components/AntDesign/message";
export default {
  name: " ",
  props: {
    columns: Array,
    dataList: Array,
    pagination: Object,
  },
  emits: ["onDataLists", "onClickUpdata", "onClickDelete"],
  setup(props: any, ctx: SetupContext) {
    const data = reactive({
      bool: true,
      loading: false,
    });

    /* 分页事件 */
    function onClickPagination(value: {
      current: number;
      pageSize: number;
      total: number;
    }) {
      props.pagination.current = value.current;
      ctx.emit("onDataLists", value.current);
    }

    /* 初始化账号 */
    async function onClickInitializeAccount(record: any) {
      data.loading = true;
      try {
        const result = await initcer({ id: record._id });
        $message("success", result.data.message);
        ctx.emit("onDataLists", props.pagination.current);
        data.loading = false;
      } catch (error) {
        $message("error", error.data.message || "初始化失败");
        data.loading = false;
      }
    }

    /* 状态开关 */
    let timeout: number = 0;
    function onChangeStatus(record: any, index: number) {
      clearTimeout(timeout);
      if (record.loginstatus) {
        try {
          timeout = setTimeout(async () => {
            const result = await upcer({
              id: record._id,
              status: record.status,
            });
            $message("success", result.data.message);
            ctx.emit("onClickUpdata", { index, status: record.status });
          }, 500);
        } catch (error) {
          $message("error", error.data.message);
        }
      } else {
        timeout = setTimeout(() => {
          $message("error", "账号未初始化");
        }, 500);
      }
    }

    /* 校验账号 */
    async function onClickVerifyAccount(record: any) {
      data.loading = true;
      try {
        const result = await valicer({ id: record._id });
        $message("success", result.data.message);
        data.loading = false;
      } catch (error) {
        ctx.emit("onDataLists", props.pagination.current);
        $message("error", error.data.message || "校验失败");
        data.loading = false;
      }
    }

    /* 删除事件 */
    async function onClickDelete(record: any, index: number) {
      try {
        const result = await delcer({ id: record._id });
        $message("success", result.data.message);
        ctx.emit("onClickDelete", { index });
      } catch (error) {
        $message("error", error.data.message || "校验失败");
      }
    }

    return {
      ...toRefs(data),
      FormatTime,
      onClickDelete,
      onClickInitializeAccount,
      onChangeStatus,
      onClickVerifyAccount,
      onClickPagination,
    };
  },
};
</script>
<style lang="less" scoped>
.ant-btn:not(:last-child) {
  margin-right: 10px;
}
.ant-btn,
.ant-tag {
  border-radius: 4px;
}
.ant-tag {
  cursor: pointer;
}
</style>